<template>
  <div>

  </div>
</template>

<script lang="ts">
import { ref, defineComponent, getCurrentInstance,onMounted } from 'vue'
import axios from 'axios';
export default defineComponent({
  name: 'Func',
  setup: () => {
    let {ctx}:any = getCurrentInstance();

    onMounted(() => {
        console.log("函数");
        console.log("=====composeWay======");
        //composeWay();
        console.log("=====pipeWay======");
        //pipeWay();
        console.log("=====convergeWay======");
        console.log(convergeWay([1,2,3,4,5]));
    })

    const func1 = () => {
      return axios.get("http://localhost:5656/list").then(res=>{
          console.log("func1",res);
      });
    } 
    const func2 = () =>{
      return axios.get("http://localhost:5656/pic").then(res=>{
          console.log("func2",res);
      })
    }
    const func3 = ()=>{
      return console.log(ctx.$R.add(7,10));
    }

    const func4 = () =>{
        return console.log(ctx.$R.multiply(2)(5));
    }

    const sumOfArr = (arr:number[]) =>{
        let sum = 0;
        arr.forEach(i => sum += i);
        return sum;
    }

    const getArrLen = (arr:number[]) =>{
        return arr.length;
    }

    const composeWay = () => ctx.$R.compose(func2,func3,func1)()
    // compose:将多个函数合并成一个函数,从右到左执行
    const pipeWay = () => ctx.$R.pipe(func4,func1,func3,func1)();
    // pipeWay 将多个函数合并成一个函数,从左到右执行
    const convergeWay = ctx.$R.converge(ctx.$R.divide,[sumOfArr,getArrLen]);
    // converge:接受两个参数,第一个参数是函数,第二个参数是函数数组。传入的值先使用第二个参数包含的函数,分别处理以后,再用第一个参数处理前一步生成的结果
    return { func1,func2,func3,func4,composeWay,pipeWay,sumOfArr,convergeWay }
  }
})
</script>

<style scoped>
a {
  color: #42b983;
}

label {
  margin: 0 0.5em;
  font-weight: bold;
}

code {
  background-color: #eee;
  padding: 2px 4px;
  border-radius: 4px;
  color: #304455;
}
</style>
